<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
			  <child-component :goods="preList"></child-component>
			  <child-component :goods="ipone">
			  	 <template scope="props">	
			  	 	 <li>
			  	 	 	<span style="color: red;">{{props.aa}}</span>
			  	 	 	<b>{{props.author}}</b>
			  	 	 </li>
			  	 </template>
			  </child-component>
			</ul>
		</div>
		<script src="js/vue2.5.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					preList:[
					  {name:'css',author:'阮一峰'},
					  {name:'js',author:'犀牛'},
					  {name:'vue',author:'尤玉溪'}
					],
					ipone:[
					  {name:'ipone6',author:'6666'},
					  {name:'ipone7',author:'7777'},
					  {name:'ipone8',author:'8888'}
					]
				},
				components:{
					'child-component':{
						props:{
							goods:{
								type : Array
							}
						},
						template:'<div><slot v-for="(item,index) in goods" :aa="item.name" :author="item.author"><li><span>{{item.name}}</span><span>{{item.author}}</span></li></slot></div>'
					}
					
				}
			})
		</script>
	</body>
</html>
